<template>
  <div class="box">
    <div class="block">
      <el-date-picker v-model="months" type="month" placeholder="选择月">
      </el-date-picker>
      <el-button @click="add" icon="el-icon-search" circle></el-button>
    </div>

    <div ref="chart" style="width: 100vw; height: 60vh"></div>
  </div>
</template>

<script>
// import '../../../assets/css/reportform.less'
export default {
  data() {
    return {
      months: "",
      uid: this.$jwt(localStorage.getItem("User-Token")).uid,
    };
  },
  methods: {
    ajax() {
      let temp = new Date(
        this.months.getFullYear(),
        this.months.getMonth() + 1,
        0
      );
      let tempA = temp.getDate();
      let dataA = [];
      for (let i = 1; i < tempA + 1; i++) {
        dataA.push(i);
      }
      let dataB = dataA.map((x) => x * 0);
      let dataC = dataA.map((x) => x * 0);
      // console.log(dataB)

      this.$http
        .get("/api/report/month", {
          datatime:
            this.months.getFullYear() +
            "-" +
            Number(this.months.getMonth() + 1) +
            "-",
          uid: this.uid,
        })
        .then((res) => {
          res.reportData.forEach((element) => {
            if (element.mo_flage == 1) {
              let daysNum = Number(
                element.con_time.substring(
                  element.con_time.lastIndexOf("-") + 1,
                  10
                )
              );

              dataB[daysNum - 1] = element.mo_money;
            }
            if (element.mo_flage == 0) {
              let daysNum = Number(
                element.con_time.substring(
                  element.con_time.lastIndexOf("-") + 1,
                  10
                )
              );
              dataC[daysNum - 1] = element.mo_money;
            }
          });

          let myChart = this.$echarts.getInstanceByDom(this.$refs.chart);
          if (myChart == null) {
            myChart = this.$echarts.init(this.$refs.chart);
          }
          let option = {
            title: {
              text: "月表",
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            legend: {},
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "value",
              boundaryGap: [0, 0.01],
            },
            yAxis: {
              type: "category",
              data: dataA,
            },
            series: [
              {
                name: "收入",
                type: "bar",
                data: dataB,
              },
              {
                name: "支出",
                type: "bar",
                data: dataC,
              },
            ],
          };
          myChart.setOption(option);
        });
    },

    add() {
      // let monthData = this.months.getFullYear() + "-" + Number(this.months.getMonth() + 1) + "-";
      if (this.months) {
        this.ajax();
      } else {
        alert("请选择月份");
      }
    },
  },
  mounted() {
      
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 90vh;
  p {
    display: flex;
    height: 2rem;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background-color: rgb(219, 219, 219);
    a {
      flex: 4;
      height: 2rem;
      line-height: 2rem;
      color: #000;
    }
    span {
      flex: 2;
      color: royalblue;
      line-height: 2rem;
    }
  }
}
</style>